<template>
  <div>
    <div class="d1">
      <div class="container">
      <div class="row">
        <header class="col-5">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link re"><span class="big">P</span>罗蒂</a>
            </li>
          </ul>
        </header>
        <div class="nav nbv col-7">
          
          <div class="buju">
          <router-link v-for="(key,val) in con" :to='key.path' :key="val" :class='{"color":key.flag}'  class="nav-link bc">{{key.title}}</router-link>
          <router-link to="/index" class="nav-link bc" v-show="name==null">登录/注册</router-link>
          <span v-show="name!=null"><a class="iconfont icon-lianxirenxuanzhong bc" id="bbb" v-on:click="clear()"></a></span>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div>  <!--主体-->
      <router-view/>
    </div>
    <footer>
      <div class="house">
        <span class="pic"><a class="iconfont icon-web-icon-"></a></span>
        <span class="pic"><a class="iconfont icon-gongzhonghao"></a></span>
        <span class="pic"><a class="iconfont icon-weibo00"></a></span>
        <span class="pic"><a class="iconfont icon-changyonglogo25"></a></span>
      </div>
      <div class="dd1">
        <div class="dd2">
          <span>版权所有©xxx公司保留所有权利。</span>
          <span>>家&nbsp;&nbsp;>队伍&nbsp;&nbsp;>&nbsp;&nbsp;服务>&nbsp;&nbsp;联系</span>
        </div>
      </div>
    </footer>
    <div class="top">
      <a href="#"><span></span></a>
    </div>
  </div>
</template>

<script>
  export default {
      data(){
          return {con:[
                {title:"首页",path:"/Home",flag:"true"},
                {title:"关于",path:"/About",flag:"false"},
                {title:"服务",path:"/serve",flag:"false"},
                {title:"新闻",path:"/news",flag:"false"},
                {title:"房屋示例",path:"/case",flag:"false"},
              ],
               name:'',
              }   
      },
      watch:{
          $route(to,from){
              if (from.path=='/'){
                  // console.log(this.con[0].flag);
                  this.con[0].flag=true;
              }
              // console.log(to);
              // console.log(from);
              //to,from 分别表示从哪跳转到哪，都是一个对象
              //console.log(to.path); //(表示的是要跳转到的路由的地址)  /Home
              this.con.forEach((key)=>{
                  if (to.path == key.path){
                      // console.log(key.path);
                      key.flag=true;
                  } else {
                      // console.log(key.path);
                      key.flag=false;
                  }
              })
          }
      },
      mounted(){
        this.name = localStorage.getItem('local');
      },
      methods:{
        clear(){
          console.log(33);
          localStorage.removeItem("local");
          this.$router.go(0);
        }
      }
  }
  window.onscroll=function () {
      var top = document.documentElement.scrollTop || window.screenTop;
      if (top > 50) {
          $('.top').css('display', 'block');
      } else {
          $('.top').css('display', 'none');
      }
      var tops =document.getElementsByClassName('top');
      tops[0].onclick=function () {
          var timer = setInterval(function () {
              top-=15;
              document.documentElement.scrollTop=window.screenTop=top;
              if(top<=0){
                  clearInterval(timer);
                  timer=null
              }
          },15)
      }
  }
</script>

<style lang="less" scoped>
  .nav{justify-content: space-between;}
  .d1{background-color: #FF9BC1;}
  .buju{display: flex;}
  .nbv a{color: #fff;font-size: 1.5rem;}
  .big{
    font-size: 5rem;
    color: white;
    font-weight: bold;
  }
  #bbb{font-size: 1.5rem;
    line-height: 8rem;
    color: #777;}
  /*a:hover{color: white}*/
  .re{
    font-weight: bolder;
    font-size: 2rem;
    color: white;
  }
  .color{color: #dd2e71 !important;}
  .bc{
    line-height: 7rem;
    /*color: #777;*/
    margin: 0 0.5rem 0 0;
  }
  footer{
    background-color: #6c6b6b;
  }
  footer>div:first-child{border-bottom: 2px solid #777474;}
  footer ul{list-style: none;
    display: flex;
    justify-content: center;
    padding: 2rem 0 1rem;}
  .house{
    background-color: #6C6B6B;
    display: flex;
    justify-content: center;
    padding: 2rem 0 2rem;
  }
  .pic{background-color: #fff}
  .pic a{color: #000000ba}
  .pic a:hover{text-decoration: none;color: #FF9BC1}
  footer>div span{color: white}
  .dd1{display: flex;
    justify-content: center;padding: 2rem 0;}
  .dd2{display: flex;
    justify-content: space-between;
    width: 80%;}
  .top{background: url('./../public/img/arrow.png') no-repeat;
    height: 32px;width: 32px;position: fixed;
    right: 3rem;bottom: 3rem;
    transition: ease-in-out;
  }
</style>
